<template>
  <div class="container">
    <div class="background">
      <div class="box">
        <div class="gqrm">
          <img src="../images/gqrm.png" alt="" />
        </div>
        <div class="yw">INVITATION</div>
        <div class="yqh">
          <img src="../images/yqh.png" alt="" />
        </div>
        <div class="hr"></div>
        <div class="white neir">
          诚挚邀请您参加广汽本田高<div style="width: 0.2rem; display:inline-block"></div>效<div style="width: 0.2rem; display:inline-block"></div>空<div style="width: 0.2rem; display:inline-block"></div>调<div style="width: 0.2rem; display:inline-block"></div>滤<div style="width: 0.2rem; display:inline-block"></div>芯助力活动
        </div>
        <div class="hr"></div>
        <div class="yp">
          <img src="../images/yp.png" alt="" />
        </div>
        <div class="white">
          <div class="liaohao">料号：08D01ALLGH2 / 08D01ALLGH1</div>
          <div class="ti">活动内容</div>
          <div class="wenben wen">
            活动期间，给予店端销售的广汽本田纯正用品原厂空调滤芯产品，相应的活动支持。
          </div>
          <div class="ti">活动时间</div>
          <div class="wen">023年8月1日-2023年9月30日</div>
        </div>
        <div class="jt" @click="$router.push('/user')">
          <img src="../images/jt.gif" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
.bbox {
  width: 100%;
  height: 100vh;
  background: url(../images/bg.jpg) no-repeat;
  background-size: 100% auto;
  position: relative;
}
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.background {
  background: url(../images/bg.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed; /* 固定背景图片不随滚动而移动 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box {
  width: 80vw;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
}
.yw {
  font-size: 1.95rem;
  font-weight: 400;
  color: #fee2a8;
  padding-top: 3.125rem;
}
.title {
  font-size: 1.875rem;
  color: #fff;
  font-weight: bold;
}
.ftitle {
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0.25rem;
  padding-left: 1.875rem;
  font-weight: 100;
}
.gqrm img {
  width: 6.41rem;
  height: 1.31rem;
  padding-top: 1.25rem;
}
.yqh img {
  width: 15.16rem;
  height: 5.09rem;
  padding-bottom: 1.25rem;
}
.yp img {
  width: 11.31rem;
  height: 11rem;
  padding-top: 1.25rem;
  position: relative;
  left: -1.875rem;
}
.white {
  color: #fff;
}
.jt {
  text-align: center;
  padding-top: 1.875rem;
  /* position: absolute;
     bottom: 0;
     left: 50%; */
}
.jt img {
  width: 1.5rem;
  height: 3.19rem;
}
.hr {
  width: 12.91rem;
  height: 0.13rem;
  background-color: #fee2a8;
}
.neir {
  /* letter-spacing: 4px; */
  width: 12.53rem;
  height: 3.2rem;
  font-size: 18.08px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 1.5rem;
  color: #fee2a8;
}
.liaohao {
  font-size: 0.75rem;
  padding-left: 1.875rem;
  padding-bottom: 3.125rem;
}
.wenben {
  width: 17.56rem;
  height: 3.94rem;
}
.wen {
  font-size: 0.88rem;
  font-weight: 400;
  color: #fee2a8;
  letter-spacing: 0.1875rem;
}
.ti {
  width: 5.5rem;
  height: 1.41rem;
  background-color: #fee2a8;
  text-align: center;
  height: 1.41rem;
  border-radius: 1.25rem;
  color: #7b0500;
  font-weight: bold;
  margin-bottom: 1.25rem;
}
</style>
